<template>
  <div class="page-wrap">
    <div class="container">
      <!-- header / 版本信息 -->
      <div class="version-box">
        <div class="left-vip">
          <div class="vip-card">
            <div class="vip-top">
              <span class="vip-icon">🏠</span>
              <span class="vip-badge">VIP</span>
            </div>
            <div class="vip-middle">
              <div class="label">会员到期时间：</div>
              <div class="expire">2024-11-30</div>
            </div>
            <el-button class="renew" @click.prevent>续费会员</el-button>
          </div>
        </div>

        <div class="right-desc">
          <div class="desc-text">
            <p>开通付费会员享受更低费率，有效降低业务成本；</p>
            <p>重复购买相同等级会员，会员有效期自动叠加；</p>
            <p>升级会员，在下方列表中点击对应的更高等级的【立即购买】按钮，系统自动结算差价；</p>
            <p>开通企业级会员和合作业务请联系客服，协助开通和办理；欢迎加入VIP会员，享受专属服务；我们提供优先技术支持和响应服务，会员付费方式灵活，开通即表示同意服务条款。</p>
          </div>
          <div class="desc-logo"></div>
        </div>
      </div>

      <!-- 历史购买记录 -->
      <div class="history-box">
        <div class="section-title">历史购买记录</div>
        <el-table
          :data="historyList"
          border
          class="history-table"
          :header-cell-style="headerCellStyle"
          :row-style="rowStyle"
        >
          <el-table-column prop="name" label="产品名称" min-width="180" />
          <el-table-column prop="buyDate" label="购买时间" width="140" />
          <el-table-column prop="expireDate" label="到期时间" width="140" />
          <el-table-column prop="price" label="金额" width="120">
            <template #default="{ row }">
              <span class="price-text">¥{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="服务内容" min-width="180" />
          <el-table-column label="操作" width="100">
            <template #default>
              <a class="op-link">续费</a>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 套餐列表 -->
      <div class="plans-box">
        <div class="section-title">套餐列表</div>
        <div class="plans-grid">
          <div
            v-for="(p, idx) in plans"
            :key="idx"
            class="plan-card"
          >
            <div class="price-block">
              <div class="price-num">{{ p.price }}</div>
              <div class="price-unit">元/年</div>
            </div>
            <div class="plan-title">{{ p.title }}</div>
            <ul class="features">
              <li v-for="(f,i) in p.features" :key="i">
                <span class="dot">✔</span>
                <span class="ft-text">{{ f }}</span>
              </li>
            </ul>
            <el-button class="buy-btn" @click.prevent>购买</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const historyList = ref([
  { name: '服务-专业版', buyDate: '2021-03-30', expireDate: '2021-11-30', price: '380.00', desc: 'vip描述内容' },
  { name: '服务-精简版', buyDate: '2021-02-30', expireDate: '2021-10-30', price: '380.00', desc: 'VIP描述内容' }
])

const plans = ref([
  { price: 280, title: '智能应用-基础版', features: ['专员服务系统平台', '免费课程有限试听服务', '财经资讯', '金融服务，低利率客服服务', '智能编码，极速开票服务'] },
  { price: 360, title: '智能应用-标准版', features: ['专员服务系统平台', '免费课程有限试听服务', '财经资讯', '金融服务，低利率客服服务', '智能编码，极速开票服务'] },
  { price: 480, title: '智能应用-专属版', features: ['专员服务系统平台', '免费课程有限试听服务', '财经资讯', '金融服务，低利率客服服务', '智能编码，极速开票服务'] },
  { price: 580, title: '智能应用-尊享版', features: ['专员服务系统平台', '免费课程有限试听服务', '财经资讯', '金融服务，低利率客服服务', '智能编码，极速开票服务'] }
])

// table styles (inline style functions)
const headerCellStyle = () => ({ background: '#fff', color: '#666', borderBottom: '1px solid #eee', fontWeight: 600 })
const rowStyle = () => ({ background: '#fff' })
</script>

<style scoped>
/* page background and main container */
.page-wrap {
  background: #f3f4f6;
  padding: 28px 150px;
  min-height: 100vh;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}
.container {
  background: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* 版本信息区域 */
.version-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

/* 左侧VIP卡 */
.left-vip {
  width: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vip-card {
  width: 320px;
  background: linear-gradient(180deg,#1c7be0,#0f66d0);
  border-radius: 8px;
  padding: 18px;
  color: #fff;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
 
  position:relative;
  margin-top: 3px;
}
.vip-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.vip-icon {
  width:48px;
  height:48px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.vip-badge {
  font-weight:700;
  font-size:16px;
  background: rgba(255,255,255,0.08);
  padding:4px 10px;
  border-radius:14px;
}
.vip-middle {
  margin-top:6px;
}
.vip-middle .label { font-size:12px; opacity:0.9; }
.vip-middle .expire { font-size:16px; font-weight:700; margin-top:6px; }

/* 黄色扁平按钮 */
.el-button.renew {
  background: #f6c400;
  color:#111;
  border:none;
  height:36px;
  border-radius:6px;
  font-weight:600;
  box-shadow:none;
  width:100%;
  margin-top: 38px;
}
.el-button.renew:hover { filter:brightness(0.98); }

/* 右侧描述 */
.right-desc {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 18px;
  border: 1px solid #eee;
  border-radius:8px;
  min-height:150px;
  box-sizing:border-box;
}
.desc-text {
  color:#666;
  font-size:13px;
  line-height:1.8;
  flex:1;
  padding-right:18px;
}
.desc-logo {
  width:86px;
  height:86px;
  background: linear-gradient(135deg,#ffd7b6,#ff9f53);
  border-radius:8px;
  flex-shrink:0;
}

/* 历史购买记录 */
.history-box { margin-bottom:22px; }
.section-title {
  font-weight:700;
  color:#222;
  margin-bottom:12px;
  font-size:16px;
}

/* 自定义表格外观 */
.history-table {
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  border:1px solid #eee;
}
.price-text {
  color:#f5a623;
  font-weight:700;
}

/* 操作链接 */
.op-link {
  color:#2b60ff;
  cursor:pointer;
  text-decoration:underline;
}

/* 套餐列表 */
.plans-box { margin-bottom:8px; }
.plans-grid {
  display:flex;
  gap:18px;
  margin-top:12px;
  flex-wrap:wrap;
}
.plan-card {
  width: calc(25% - 13.5px);
  min-width:220px;
  background:#fff;
  border-radius:8px;
  padding:22px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border: 1px solid #000;
}

/* 价格左上靠近 */
.price-block {
  text-align:left;
  display:flex;
  align-items:flex-end;
  gap:6px;
}
.price-num {
  color:#e60012;
  font-weight:800;
  font-size:28px;
  line-height:1;
}
.price-unit {
  color:#e60012;
  font-size:12px;
  margin-bottom:4px;
}

/* 套餐名称 */
.plan-title {
  margin-top:8px;
  font-weight:700;
  color:#222;
}

/* 特点列表 */
.features {
  margin:14px 0;
  padding:0;
  list-style:none;
}
.features li {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  color:#444;
  font-size:13px;
}
.dot {
  width:18px;
  height:18px;
  border-radius:50%;
  background:#eaf5ff;
  color:#2b80ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  border:1px solid rgba(43,128,255,0.08);
}

/* 底部圆角蓝色购买按钮 */
.buy-btn {
  margin-top:65px;
  width:140px;
  height:40px;
  align-self:center;
  border-radius:20px;
  background: linear-gradient(180deg,#1e90ff,#0f78e6);
  color:#fff;
  border:none;
  font-weight:700;
}
.buy-btn:hover { filter:brightness(0.98); }

/* 响应：在窄屏把卡片改成一列或两列 */
@media (max-width: 1100px) {
  .plans-grid { gap:12px; }
  .plan-card { width: calc(50% - 9px); }
  .left-vip { width: 260px; }
}
@media (max-width: 760px) {
  .version-box { flex-direction:column; gap:12px; }
  .plans-grid { flex-direction:column; }
  .plan-card { width:100% }
  .left-vip { width:100%; display:flex; justify-content:center; }
  .right-desc { width:100%; }
  .container { padding: 16px; }
}
</style>
